<template>
  <div class="dashboard-container">
    <h2 style="text-align: center">{{ infoTitle }}</h2>
    <el-steps
      :active="active"
      finish-status="success"
      align-center
      process-status="wait"
      style="margin-bottom: 40px"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item>
        <el-input
          class="search"
          placeholder="请输入您要搜索的课程章节或小节"
        ></el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="showDialogChapter()"
          >添加章节</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="previous">返回修改</el-button>
        <el-button type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :title="chapterTitle" :visible.sync="chapterVisible">
      <el-form>
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8080/eduservice/video/uploadVideo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-success="hanleSuccess"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取小节视频文件</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传小节视频到服务器</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="章节名称">
          <el-input v-model="chapter.title"></el-input>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input v-model="chapter.sort"></el-input>
        </el-form-item>
        <!-- 在添加章节的弹窗页面里面 添加我们的小节 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chapterVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChapter()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import chapterApi from "@/api/chapter";
import videoApi from "@/api/video";
export default {
  components: {},
  data() {
    return {
      fileList: [],
      infoTitle: "发布新课程",
      active: 2,
      dialogVisible: false,
      chapter: {
        id: null,
        courseId: null,
        title: "",
        sort: 0,
      },
    };
  },
  created() {
    this.init();
  },
   watch: {
    $route(to, from) {
      this.init();
    },
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    showDialogChapter() {
      this.dialogVisible = true;
    },
    handleSuccess(res, file, fileList){
      console.log(res)
    },
    next() {
      this.$router.push({ path: "/course/publish/" + this.$route.params.id });
    },
    //上一步返回 章节与小节页面
    previous() {
      // this.$router.push({ path: "/course/addChapter/"+ res.data.courseId });
      this.$router.push({
        path: "/course/addCourseInfo/" + this.$route.params.id,
      });
    },
  },
};
</script>

<style >
.search {
  width: 65%;
  margin-right: 10px;
}
</style>